<template>
	<view class="content">
		<view class="content-top">
			<image src="/static/static/top-bg-1.png"></image>
			<view class="content-input">
				<view class="item-input">
					<view class="item-input-left">联系人</view>
					<view class="item-input-right">
						<input request v-model="username" class="uni-input" maxlength="20" placeholder="请输入店主/负责人" placeholder-style="color:#C8C7CC" />
					</view>
				</view>
				
				<view class="item-input">
					<view class="item-input-left">手机号</view>
					<view class="item-input-right">
						<input type="number" request v-model="phone" class="uni-input" maxlength="11" placeholder="请输入店主/负责人手机号" placeholder-style="color:#C8C7CC" />
					</view>
				</view>
				
				<view class="item-input">
					<view class="item-input-left">验证码</view>
					<view class="item-input-code">
						<input request v-model="code" type="number" class="code-input" maxlength="6" placeholder="请输入验证码" placeholder-style="color:#C8C7CC" />
						<text class="label-txt">|</text> <text :class="phoneState" @click="sendCode">{{sendBtnText}}</text>
					</view>
				</view>
				
				<view class="item-input" v-if="isAccount==2">
					<view class="item-input-left">密码</view>
					<view class="item-input-right">
						<input request v-model="password" class="uni-input" maxlength="11" placeholder="请输入密码" placeholder-style="color:#C8C7CC" />
					</view>
				</view>
				
				<view class="item-input" v-if="accountType==1">
					<view class="item-input-left">入驻类型</view>
					<view class="item-input-right">
						<view class="item-select" @tap="showSelectType">
							<text>{{showType}}</text>
							<image style="width: 18rpx;height: 18rpx;" class="item-select-arrow" src="/static/static/arrow.png"></image>
						</view>
					</view>
				</view>
				
				<view class="item-input">
					<view class="item-input-left">所在区域</view>
					<view class="item-input-right">
						<view class="item-select" @tap="openAddres">
							<text>{{showRegion}}</text>
							<image style="width: 18rpx;height: 18rpx;" class="item-select-arrow" src="/static/static/arrow.png"></image>
						</view>
						<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor='#0CD4D3'></simple-address>
					</view>
				</view>
				
				<view class="item-input">
					<view class="item-input-left">详细地址</view>
					<view class="item-input-right">
						<input request v-model="address" class="uni-input" maxlength="100" placeholder="请输入门店详细地址" placeholder-style="color:#C8C7CC" />
					</view>
				</view>
				
				<view class="login-tips">
					<radio value="agree" color="#00D5D4" style="transform:scale(0.7)" @click="takeRegAgree" />
					我已确认同意 <text class="link" @tap="agreement">《物联云商入驻协议》</text>
				</view>
				
				<view class="submit-btn" @click="submitReg">提交</view>
				
			</view>
		</view>
		
		<block v-if="selectTypeDialog">
			<view class="modal-mask"></view>
			<view class="select-type-content">
				 <!--<view class="icon font_family" style="color: #007AFF;">&#xe753;</view>-->
				 <view class="select-type-tips">请选择入驻类型 <image @click="hideTypeDialog" src="/static/static/x.png"></image></view>
				 <view class="select-type-item" v-for="(item,index) in typeList" :key="index" :item="item" @tap="selectType(index)">
					 <view class="type-item-left"><image :src="item.icon"></image></view>
					 <view class="type-item-right">
						 <view class="type-title">{{item.title}}</view>
						 <view class="type-summary">{{item.summary}}</view>
					 </view>
					 <image v-if="index == typeIndex" class="type-v" src="/static/static/v.png"></image>
				 </view>
				 
				 <view class="seletc-type-btn" @click="comfirmType">
					 确定
				 </view>
			</view>
		</block>
		
	</view>
</template>

<script>
	import CONSTS from '@/src/consts';
	import simpleAddress from "@/src/pages/components/simple-address/simple-address.nvue";
	export default {
		data() {
			return {
				isAccount:'1', // 是否已经存在账号：1-存在；2-不存在
				accountType:0,
				agree:false,
				cityPickerValueDefault: [0, 0, 1],
				pickerText: '',
				selectTypeDialog:false,
				selectRegionDialog:false,
				typeIndex:null,
				businessType:[],
				showType:'请选择',
				showRegion:'请选择',
				typeList:[
					{
						title:'美食',
						summary:'线上开店·带客流·做营销·查数据',
						icon:'/static/static/food.png',
						managementId:0
					},
					{
						title:'酒店住宿',
						summary:'加入物联云商酒店,实现销售口碑双增长',
						icon:'/static/static/hotel.png',
						managementId:0
					},
					{
						title:'旅游景点',
						summary:'支持多种旅游产品,诚邀优质商家加盟',
						icon:'/static/static/travel.png',
						managementId:0
					},
					{
						title:'休闲娱乐',
						summary:'休闲娱乐、亲子、婚礼、ktv的商家',
						icon:'/static/static/entertainment.png',
						managementId:0
					},
					{
						title:'生活服务',
						summary:'家政、维修、装修等商家',
						icon:'/static/static/service.png',
						managementId:0
					},
				],
				username:'',
				phone:'',
				code:'',
				address:'',
				phoneState:'active',
				sendBtnText:'获取验证码',
				timeNum:60,
				password:'',
				managementId:0,
				provinceCode:0,
				cityCode:0,
				areaCode:0
			}
		},
		onLoad(option) {
			let id = option.id;
			let title = '';
			
			if(id==1){
				title = '商家入驻-本地生活圈';
				
				uni.request({
				    url: CONSTS.BASE_URL + CONSTS.API_BUSINESS_TYPE_PATH, //仅为示例，并非真实接口地址。
					method:"POST",
				    data: {
				       
				    },
				    header: {
				        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' ,
				    },
				    success: (res) => {
						console.log(res);
						if(res.data.code==200){
							
							for (var k = 0, length = res.data.data.length; k < length; k++) {
							    
								console.log(res.data.data[k]['managementName']);
								if(res.data.data[k]['managementName']=='美食'){
									this.typeList[0]['managementId'] = res.data.data[k]['managementId'];
								}else if(res.data.data[k]['managementName']=='酒店住宿'){
									this.typeList[1]['managementId'] = res.data.data[k]['managementId'];
								}else if(res.data.data[k]['managementName']=='旅游景点'){
									this.typeList[2]['managementId'] = res.data.data[k]['managementId'];
								}else if(res.data.data[k]['managementName']=='休闲娱乐'){
									this.typeList[3]['managementId'] = res.data.data[k]['managementId'];
								}else if(res.data.data[k]['managementName']=='生活服务'){
									this.typeList[4]['managementId'] = res.data.data[k]['managementId'];
								}
							    
							} 
						}
						
						console.log(this.typeList);
				        
				    }
				});
				
			}else if(id==2){
				title = '商家入驻-百货购物';
			}else {
				uni.redirectTo({
				    url: '/pages/index/index'
				});
				return;
			}
			
			this.accountType = id;
			uni.setNavigationBarTitle({
			　　title:title
			});
			
			
			
			
		},
		components: {
			simpleAddress
		},
		methods: {
			takeRegAgree(){
				this.agree = true;
			},
			agreement() {
				uni.navigateTo({
				    url: '/pages/index/agreement?id=' + this.accountType
				});
			},
			openAddres() {
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				this.pickerText = JSON.stringify(e)
				console.log(e);
				this.showRegion = e.label;
				this.provinceCode = e.provinceCode;
				this.cityCode = e.cityCode;
				this.areaCode = e.areaCode;
			},
			sendCode() {
				if(this.phoneState=='active'){
					if (!this.phone) {
						uni.showToast({title: '手机号不能为空',icon:'none',duration: 2000});
						return;
					}else if(this.checkMobile(this.phone)){
						uni.showToast({title: '请填写正确的手机号',icon:'none',duration: 2000});
						return;
					}
					
					var that = this;
					var clock = null;
					that.sendBtnText = that.timeNum;
					that.phoneState = 'disable';
					clock = setInterval(function () {
						that.timeNum -- ;
						if (that.timeNum > 0) {
							that.sendBtnText = that.timeNum;
						} else {
							clearInterval(clock); //清除js定时器
							that.sendBtnText = '重新发送';
							that.timeNum = 60; //重置时间
							that.phoneState = 'active';
					    }
					}, 1000);
					
					//提交发送短信
					const param = {
					  phone: this.phone,
					  loginType: 1,
					};
					
					
					uni.request({
						    url: CONSTS.BASE_URL+CONSTS.API_VERICODE_PATH, //仅为示例，并非真实接口地址。
						    data: param,
						    header: {
						        'content-type': 'application/json' //自定义请求头信息
						    },
						    success: function (res) {
						        // console.log(res.data);
								
								if(res.data.code==200){
									uni.showToast({title: '发送成功',icon:'success',duration: 1000});
									this.isAccount = res.data.code.isAccount
								}else{
									uni.showToast({title: '网络延迟,请稍后再试~',icon:'none',duration: 2000});
								}
								
						    },
							fail:function(err){
								uni.showToast({title: '网络延迟,请稍后再试~',icon:'none',duration: 2000});
							}
					});
					
					
					
				}
			},
			phoneChange:function(event) {
				/*
				this.phone = event.target.value
				if(this.phone.length==11 && !isNaN(this.phone)){
					
					this.phoneState = 'active';
			
				}else{
					this.phoneState = 'disable';
				}
				*/
			},
			checkMobile: function(phone){
				   var flag = false;
				   var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;
				   if (!myreg.test(phone)) {
				        flag = true;
				   }
				   return flag;
			},
			showSelectType(){
				this.selectTypeDialog = true;
			},
			hideTypeDialog(){
				this.typeIndex = null;
				this.selectTypeDialog = false;
			},
			selectType(index){
				this.typeIndex = index;
			},
			comfirmType(){
				this.selectTypeDialog = false;
				if(this.typeList[this.typeIndex].managementId==0){
					this.typeIndex = null;
					this.managementId = 0;
					this.showType = '请选择';
					uni.showToast({title: '此类型暂未开放',icon:'none',duration: 2000});
					return;
				}
				this.managementId = this.typeList[this.typeIndex].managementId;
				this.showType = this.typeList[this.typeIndex].title;
				console.log('managementId:' + this.managementId);
			},
			showSelectRegion(){
				this.selectRegionDialog = true;
			},
			submitReg(){
				
				
				if(this.agree==false){
					uni.showToast({title: '请先确认相关协议',icon:'none',duration: 2000});
					return;
				}
				if(this.username=='') {
					uni.showToast({title: '请输入联系人',icon:'none',duration: 2000});
					return;
				}
				if(this.phone=='') {
					uni.showToast({title: '请输入手机号',icon:'none',duration: 2000});
					return;
				}else if(this.checkMobile(this.phone)){
					uni.showToast({title: '请填写正确的手机号',icon:'none',duration: 2000});
					return;
				}
				if(this.code=='') {
					uni.showToast({title: '请输入验证码',icon:'none',duration: 2000});
					return;
				}
				if(this.password=='') {
					uni.showToast({title: '请输入密码',icon:'none',duration: 2000});
					return;
				}
				if(this.accountType==1){
					if(this.managementId==0) {
						uni.showToast({title: '请选择入驻类型',icon:'none',duration: 2000});
						return;
					}
				}
				if(this.provinceCode==0 || this.cityCode==0 || this.areaCode==0) {
					uni.showToast({title: '请选择所在区域',icon:'none',duration: 2000});
					return;
				}
				if(this.address=='') {
					uni.showToast({title: '请填写详细地址',icon:'none',duration: 2000});
					return;
				}
				if(this.accountType!=1 && this.accountType!=2){
					return;
				}
				let param = {};
				console.log(this.accountType);
				if(this.accountType==1){
					param = {
					  accountType: this.accountType,
					  areaCode: this.areaCode,
					  cityCode: this.cityCode,
					  code: this.code,
					  detailAddress: this.address,
					  firstManagementTypeId: this.managementId,
					  isAccount:this.isAccount,
					  landingAccount: this.phone,
					  landingPassword: this.password,
					  nickName: this.username,
					  phone: this.phone,
					  provinceCode: this.provinceCode
					};
				}else if(this.accountType==2){
					param = {
					  accountType: this.accountType,
					  areaCode: this.areaCode,
					  cityCode: this.cityCode,
					  code: this.code,
					  detailAddress: this.address,
					  landingAccount: this.phone,
					  landingPassword: this.password,
					  nickName: this.username,
					  phone: this.phone,
					  provinceCode: this.provinceCode
					};
				}
				console.log(param);
				
				uni.showLoading({
					mask: true,   
					title: '入驻中'
				});
				 
				let that = this;
				uni.request({
				    url: CONSTS.BASE_URL+CONSTS.API_REGISTER_PATH, //仅为示例，并非真实接口地址。
				    data: param,
					method:"POST",
				    header: {
				        'content-type': 'application/json;charset=UTF-8' //自定义请求头信息
				    },
				    success: function (res) {
				        console.log(res.data);
						uni.hideLoading();
						
						if(res.data.code==200){
							uni.setStorageSync('userInfo', res.data.data);
							uni.showToast({title: '注册成功',icon:'success',duration: 1000});
							//跳转
							setTimeout(() => {
								uni.redirectTo({
								    //url: '/pages/index/success?id=' + that.accountType
									url: '/src/pages/login/index'
								});
							}, 2000);
							
						}else{
							uni.showToast({title: res.data.message,icon:'none',duration: 2000});
						}
					
				    },
					fail: function (err) {
						uni.hideLoading();
						uni.showToast({title: '网络延迟，请稍后再试~',icon:'none',duration: 1000});
					}
				});
			}
		}
	}
</script>
	
<style>
	/*@import url("/static/static/iconfont/iconfont.css");
	.icon {
		font-size: 90rpx;
	}
	*/
    .submit-btn {
	   width: 650rpx;
	   margin: 20rpx auto;
	   background: #00D5D4;
	   color: #FFFFFF;
	   border-radius: 60rpx;
	   text-align: center;
	   padding: 20rpx 20rpx;
	   font-size: 30rpx;
    }

	.login-tips {
		text-align: center;
		font-size: 26rpx;
		margin: 60rpx auto;
	}
	
	.login-tips .link{
		color: #00D5D4;
	}
   
   .type-v {
	   position: absolute;
	   top: 40rpx;
	   right: 20rpx;
	   width: 42rpx;
	   height: 28rpx;
   }
   
   .seletc-type-btn {
	   background: #0CD4D3;
	   border-radius: 10rpx;
	   color: #FFFFFF;
	   font-size: 28rpx;
	   width: 85%;
	   margin: 0rpx auto;
	   text-align: center;
	   padding: 20rpx;
	   margin-top: 130rpx;
   }
   .modal-mask {
		position: fixed;
		z-index: 99;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0,0,0,.6);
   }
   
   .select-type-tips image {
	   width: 44rpx;
	   height: 44rpx;
	   position: absolute;
	   top: 40rpx;
	   right: 20rpx;
   }
   
   .type-title {
	   font-size: 32rpx;
   }
   .type-summary {
	   font-size: 28rpx;
	   color: #C8C7CC;
   }
   .type-item-right {
	   margin-left: 30rpx;
	   line-height: 50rpx;
   }
   .type-item-left {
	   width: 90rpx;
	   height: 90rpx;
   }
   
   .type-item-left image {
   	   width: 90rpx;
   	   height: 90rpx;
   }
   
   .select-type-item {
	   display: flex;
	   flex-direction: row;
	   margin: 40rpx 20rpx;
	   position: relative;

   }
   
   .select-type-tips {
	   padding: 50rpx 30rpx;
	   font-size: 28rpx;
	   position: relative;
   }
	
	.select-type-content {
		width: 100%;
		height:1100rpx;
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
		background: #efefef;
		position: fixed;
		bottom: 0rpx;
		z-index: 99;
	}
	.item-input-code .active {
		color: #0cd4d3;
	}
	
	.item-input-code .disable {
		color: #C8C7CC;
	}
	
	.item-input {
		display: flex;
		flex-direction: row;
		font-size: 32rpx;
		margin: 0rpx 40rpx;
		border-bottom:  solid 1rpx #C8C7CC;
		padding: 40rpx 0rpx;
	}
	
	.item-select {
		color: #C8C7CC;
		position: relative;
	}
	
	.item-select-arrow {
		width: 18rpx;
		height: 18rpx;
		position: absolute;
		top: 15rpx;
		right: 10rpx;
	}
	
	.code-input {
		width: 240rpx;
	}
	
	.label-txt {
		color: #C8C7CC;
		padding: 0rpx 20rpx;
	}
	
	.label-btn {
		color: #0cd4d3;
	}
	
	.item-input-code {
		display: flex;
		flex-direction: row;
	}
	
	.item-input-left {
		width: 30%;
		color: #464646;
	}
	.item-input-right {
		width: 70%;
	}
	
	.uni-input {
		width: 100%;
	}
	
	.content-top {
		position: relative;
		height: 1500rpx;
	}
	
	.content-top image {
		width: 750rpx;
		height: 320rpx;
	}
	
	.content-input {
		position: absolute;
		border-radius: 20rpx;
		background: #FFFFFF;
		height: 1200rpx;
		width: 100%;
		top: 280rpx;
		left: 0rpx;
	}
</style>
